<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="line"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
	props: {
		chartData: {
			type: Object,
			required: true
		}
	},
  data() {
    return {
      // chartData:  {
      //       categories: ["2016","2017","2018","2019","2020","2021"],
      //       series: [
      //         {
      //           name: "成交量A",
      //           data: [35,8,25,37,4,20]
      //         },
      //         {
      //           name: "成交量B",
      //           data: [70,40,65,100,44,68]
      //         },
      //         {
      //           name: "成交量C",
      //           data: [100,80,95,150,112,132]
      //         }
      //       ]
      //     },
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [0,10,0,15],
        legend: {
			position:'top',
		},
		dataLabel:false,
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          line: {
            type: "curve",
            width: 2
          }
        }
      }
    };
  },
 
  methods: {
 
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>